<template>
  <router-view />
</template>

<script setup lang="ts">
// App根组件
</script>

<style>
:root {
  --primary-color: #2e7d32;
  --primary-light: #4caf50;
  --primary-dark: #1b5e20;
  --secondary-color: #81c784;
  --accent-color: #66bb6a;
  --text-primary: #2c3e50;
  --text-secondary: #546e7a;
  --background-primary: #ffffff;
  --background-secondary: #f8f9fa;
  --border-color: #e0e0e0;
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --error-color: #f44336;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--background-secondary);
  color: var(--text-primary);
  line-height: 1.6;
}

#app {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-primary);
  min-height: 100vh;
}

/* Element Plus 主题色覆盖 */
.el-button--primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.el-button--primary:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
}

.el-button--success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
}

.el-menu--horizontal > .el-menu-item.is-active {
  color: var(--primary-color) !important;
  border-bottom-color: var(--primary-color) !important;
}

.el-menu--horizontal > .el-menu-item:hover {
  color: var(--primary-color) !important;
}

.el-menu-item.is-active {
  color: var(--primary-color) !important;
  background-color: rgba(46, 125, 50, 0.1) !important;
}

.el-menu-item:hover {
  color: var(--primary-color) !important;
}

.el-card__header {
  background-color: var(--background-primary);
  border-bottom: 2px solid var(--primary-color);
}

.el-table th {
  background-color: var(--background-secondary);
  color: var(--text-primary);
}

.el-pagination .el-pager li.is-active {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.el-tag--success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
}
</style>
